<template>
  <div class="content">
    <div class="l_content" v-if="pageData.songList">
      <div class="top">
        <div class="cover">
          <img :src="require(`../../assets/images/songSheet0${imgIdx}.jpg`)" alt="#">
        </div>
        <div class="title">
          <h2>{{ pageData.songList.name }}</h2>
        </div>
        <div class="createTime">
          <img :src="require(`../../assets/images/${pageData.singer.singerName}.jpg`)">
          <p>{{ pageData.singer.singerName }}&nbsp;&nbsp;{{ pageData.songList.createTime }}&nbsp;创建</p>
        </div>
        <div class="play_collect">
          <img src="./images/play.png" alt="">
          <img class="collect1" src="./images/collect1.png">
          <button class="play">播放</button>
          <button class="collect">收藏</button>
        </div>
        <div class="introduce">
          <p>简介：{{ pageData.songList.synopsis }}</p>
        </div>

      </div>
      <div class="rheader">
        <h3><span>歌曲列表</span></h3>
        <h4>总共 1 首歌</h4>
        <span class="songsall">所有时间</span>
        <i></i>
        <span class="songsweek">最近一周</span>
      </div>
      <div class="bottom">
        <ul>
          <!-- <li v-for="(item, index) in list" :key="item.id" :class="index % 2 === 0 ? 'bg' : ''"
            @click="toSong(item.id)">
            <div class="barrel">
              &nbsp;&nbsp;<span class="number">{{ ++index }}</span>.&nbsp;&nbsp;
              <img src="./images/icon.png">&nbsp;&nbsp;&nbsp;
              <span class="liItem">{{ item.singer }}</span>&nbsp;&nbsp;
              <span class="signerName">-&nbsp;&nbsp;{{ item.music }}</span>
            </div>
          </li> -->
          <li @click="toSong(pageData.song.id, pageData.song.songName)">
            <div class="barrel">
              <!-- &nbsp;&nbsp;<span class="number">{{ ++index }}</span>.&nbsp;&nbsp; -->
              <div class="song-name">
                <img src="./images/icon.png">
                <span>{{ pageData.song.songName }}</span>
              </div>
              <span class="duration">{{ pageData.song.duration }}</span>
              <span class="composer">{{ pageData.song.composer }}</span>
              <span class="lyricist">{{ pageData.song.lyricist }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="r_content">
      <UserInfo></UserInfo>
    </div>
  </div>
</template>

<script>
import { reqSongListById } from '@/api/index'
import UserInfo from '@/components/UserInfo'
export default {
  components:{ UserInfo },
  data() {
    return {
      imgIdx: this.$route.params.imgIdx,
      pageData: {}
    }
  },
  created() {
    reqSongListById({id: this.$route.params.songListId}).then(res => {
      this.pageData = res.object || {}
    })
  },
  methods: {
    toSong(id, songName) {
      this.$router.push({
        path: `/song/${id}/${songName}`
      })
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo
    },
    token() {
      return this.$store.state.user.token
    }
  }
}
</script>

<style scoped lang="less">
.bg {
  background-color: rgb(238, 238, 238);
}

.content {
  width: 1000px;
  height: 1000px;
  margin: 0 auto;

  .l_content {
    width: 709px;
    height: 1000px;
    background-color: rgb(255, 255, 255);
    border: 1px solid #dadada;
    float: left;

    .top {
      width: 640px;
      height: 255px;
      margin: 0 auto;
      margin-top: 40px;

      .cover {
        float: left;

        img {
          width: 200px;
          height: 200px;
        }
      }

      .title {
        width: 400px;
        height: 38px;
        position: relative;
        left: 200px;

        h2 {
          font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
          font-size: 20px;
          position: absolute;
          left: 30px;
          font-weight: normal;
        }
      }

      .createTime {
        width: 410px;
        height: 35px;
        margin: 0 0 20px;
        line-height: 35px;
        position: relative;
        left: 200px;

        img {
          width: 35px;
          height: 35px;
          // margin-left: 30px;
          position: absolute;
          top: 0;
          left: 30px;
        }

        p {
          position: absolute;
          margin: 0 0 20px;
          line-height: 35px;
          top: 0;
          left: 80px;
          color: #999;
        }
      }

      .play_collect {
        width: 420px;
        height: 32px;
        position: relative;
        left: 200px;

        img {
          width: 21px;
          position: absolute;
          left: 33px;
          top: 3px;
          z-index: 999;
        }

        .collect1 {
          width: 21px;
          position: absolute;
          left: 153px;
          top: 4px;
          z-index: 999;
        }

        .play {
          width: 76px;
          height: 31px;
          background-color: rgb(62, 141, 215);
          position: absolute;
          top: 0;
          left: 30px;
          border-radius: 10%;
          color: white;
          text-align: center;
          border: none;
          border: 1px solid rgb(192, 192, 192);
        }

        .collect {
          width: 76px;
          height: 31px;
          background-color: rgb(247, 247, 247);
          position: absolute;
          top: 0;
          left: 150px;
          border-radius: 10%;
          color: rgb(0, 0, 0);
          text-align: center;
          border: 1px solid rgb(192, 192, 192);
        }
      }

      .introduce {
        width: 420px;
        height: 55px;
        position: relative;
        top: 20px;
        left: 200px;

        p {
          line-height: 18px;
          color: #666;
          position: absolute;
          left: 30px;
        }
      }
    }

    .rheader {
      width: 670px;
      height: 35px;
      background: rgb(255, 255, 255);
      margin: 0 auto;

      h3 {
        font-size: 20px;
        line-height: 28px;
        float: left;
        font-weight: normal;
      }

      h4 {
        float: left;
        display: inline;
        margin-top: 5px;
        margin-left: 10px;
        line-height: 26px;
        font-weight: 400px;
        color: #666;
      }

      .songsall {
        line-height: 26px;
        color: #666;
        cursor: pointer;
        float: right;
        margin-left: 8px;
      }

      i {
        width: 1px;
        height: 12px;
        margin-top: 7px;
        background: #999;
        font-style: normal;
        font-size: inherit;
      }

      .songsweek {
        line-height: 26px;
        color: #333;
        font-weight: 700;
        float: right;
        margin-left: 8px;
      }
    }

    .bottom {
      width: 670px;
      margin: 0 auto;
      border: 1px solid #c6c5c5;
      border-top: 2px solid rgb(194, 12, 12);

      ul {
        display: block;

        li {
          display: list-item;
          width: 670px;
          height: 38px;
          line-height: 38px;
          .barrel {
            display: flex;
            .song-name {
              flex: 1;
              padding-left: 20px;
              img {
                margin-top: -5px;
                margin-right: 5px;
                vertical-align: middle;
              }
            }
            .duration {
              display: inline-block;
              width: 60px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .composer, .lyricist {
              display: inline-block;
              width: 110px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            img {
              width: 17px;
              height: 17px;
            }
            &:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  .r_content {
    float: right;
    height: 1000px;
    border-right: 1px solid #dadada;
  }
}
</style>